<template>
  <div class="life-style" v-if="!lifeStyleLoading">
    <section-title title="生活指数"/>
    <div class="list">
      <life-style-item
        v-for="(o,i) in list"
        :key="i"
        :icon="o.icon"
        :title="o.title"
        :text="o.text"
      />
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { SectionTitle, LifeStyleItem } from '@/components'
// icons
import life1 from '@/assets/icons/life1.png'
import life2 from '@/assets/icons/life2.png'
import life3 from '@/assets/icons/life3.png'
import life4 from '@/assets/icons/life4.png'
import life5 from '@/assets/icons/life5.png'
import life6 from '@/assets/icons/life6.png'

const { mapState, mapActions } = createNamespacedHelpers('Home')
export default {
  name: 'life-style',
  components: { SectionTitle, LifeStyleItem },
  computed: {
    ...mapState(['lifeStyle', 'lifeStyleLoading']),
    list() {
      return [
        {
          icon: life1,
          title: '穿衣',
          text: this.lifeStyle.dress
        },
        {
          icon: life2,
          title: '运动',
          text: this.lifeStyle.sports
        },
        {
          icon: life3,
          title: '空调',
          text: this.lifeStyle.aircondition
        },
        {
          icon: life4,
          title: '洗车',
          text: this.lifeStyle.carwash
        },
        {
          icon: life5,
          title: '感冒',
          text: this.lifeStyle.cold
        },
        {
          icon: life6,
          title: '紫外线',
          text: this.lifeStyle.ultraviolet
        }
      ]
    }
  },
  methods: { ...mapActions(['getLifeStyle']) },
  mounted() {
    this.getLifeStyle()
  }
}
</script>

<style lang="stylus">
.life-style {
  .life-style-item {
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
  }
}
</style>
